Mostrar / ocultar - Efecto Drop-Down

• Ahora no me ves
• Ahora si me ves.

• Soy un texto pequeño
• Pero ahora soy un texto muy, muy, muy, muy, muy grande.

• Soy un texto
• Pero ahora soy un link
  
• Y puedo mostrar más texto...
• "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English"

Esta es una técnica creada con CSS por Desizntech pueden ver su ejemplo aquí. Me pareció muy interesante para ocultar contenido ya que sólo necesitamos añadir unas líneas en las hojas de estilos para poder utilizarlo.

Depurando un poco el código sería suficiente con añadir justo antes de ]]></b:skin> lo siguiente:

#dropdown ul .drop{
display:none;
}
#dropdown ul:hover .drop{
display:block;
padding-bottom:10px;
}

Luego, donde queremos añadir ese efecto sería algo así:

Aquí va el contenido inicial

<div id="dropdown"><ul>Sigue leyendo<a class="drop">

Contenido oculto...

</a></ul></div>

Aquí continúa nuestra entrada.

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' wil

Sigue leyendo
• 
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.

Si en lugar de Sigue leyendo queremos añadir una imagen podemos hacerlo sustituyendo el texto de "Sigue leyendo" por <img src="url-de-la-imagen"/>

Aquí va el contenido inicial

•   
• Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  

Aquí continúa nuestra entrada.

También podemos añadirle unos estilos con la etiqueta span y en lugar de "Sigue leyendo" añadir <span class="span">Sigue leyendo</span>
y los siguientes estilos antes de ]]></b:skin>

.span{

border: solid #333;

padding: 2px;

background: #fff;

color:#333;

font-size:12;

}

Aquí va el contenido inicial

Sigue leyendo
• 
  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  

Aquí continúa nuestra entrada.